import React,{PureComponent} from 'react';
import {connect} from 'react-redux';
import {ListWrapper,ListA,DateShow,SmallDateShow} from '../style';
import { Carousel , List, Icon} from 'antd';
import {NavLink} from "react-router-dom";
import news from '../../../icon/新闻.png';

class NewsShow extends PureComponent {

    getYear(s){return s.toString().slice(0,4);}
    getDate(s){return s.toString().slice(5,6)==='0'?s.toString().slice(6):s.toString().slice(5);}
    render(){
        const data={
            news:this.props.news.toJS()
        };

        return(
                <ListA>
                    <ListWrapper  style={{marginTop:'50px',paddingRight:'5%'}}>
                        <Carousel vertical>
                            {data.news.length>=1?data.news.map(item=>{ return  <div key={item.id}><DateShow><div>{this.getDate(item.creationTime)}</div><div>{this.getYear(item.creationTime)}</div></DateShow><img style={{width:'100%',height:'310px',marginBottom:'10px'}} src={item.imageUrl} alt=''/>  <div className='imgtitle'>{item.title}</div></div>}):<h1>加载中...</h1>}
                        </Carousel>
                    </ListWrapper>
                    <ListWrapper  style={{paddingLeft:'3%'}}>
                        <div style={{marginBottom:'10px',height:'60px'}}><h1 className='title'><img style={{width:'43px',height:'38px',padding:'0 10px 5px 0'}} alt='' src={news}/>学院新闻</h1> <NavLink className='more' to={{pathname: '/ListPage', state: {url:'/getData?tbName=news',bar:{barType:'学院新闻',menu:[]}}}}>more<Icon type="caret-right" style={{fontSize:'20px'}} /></NavLink></div>

                        <List
                            itemLayout="horizontal"
                            dataSource={data.news}
                            renderItem={item => (
                                <div>
                                    <List.Item   style={{ borderBottom:'none', padding:'0' }}>
                                        <List.Item.Meta  title={<div  className='imgtitle' style={{color:'#0d6fb8',lineHeight:'55px'}} onClick={()=>{window.open(window.barIp+item.path+'?tbName=news&&id='+item.id)}}><SmallDateShow><div>{this.getDate(item.creationTime)}</div><div>{this.getYear(item.creationTime)}</div></SmallDateShow>{item.title}</div>}/>
                                    </List.Item>
                                </div>
                            )}
                        />
                    </ListWrapper>
                </ListA>
        )

    }
}
const mapState=(state)=>({
    news: state.getIn(['home','news'])
});
export default connect(mapState,null)(NewsShow);